<template>
	<div class="wrap">
		<e-chart :options="option" style="height:100%"></e-chart>
	</div>
</template>

<script>
	import 'echarts/map/js/china.js'
	import { getChinaMap2 } from "@/api/bigScreen/bigScreen";

	export default {
		data() {
			return {
				option: null,
				geoGpsMap: [120.299, 31.568],
				t:1,
				r:1
			}
		},
		mounted() {
			this.geoCoordMap = {
				"江苏": [118.8062, 31.9208],
				'黑龙江': [127.9688, 45.368],
				'内蒙古': [110.3467, 41.4899],
				"吉林": [125.8154, 44.2584],
				'北京市': [116.4551, 40.2539],
				"辽宁": [123.1238, 42.1216],
				"河北": [114.4995, 38.1006],
				"天津": [117.4219, 39.4189],
				"山西": [112.3352, 37.9413],
				"陕西": [109.1162, 34.2004],
				"甘肃": [103.5901, 36.3043],
				"宁夏": [106.3586, 38.1775],
				"青海": [101.4038, 36.8207],
				"新疆": [87.9236, 43.5883],
				"四川": [103.9526, 30.7617],
				"重庆": [108.384366, 30.439702],
				"山东": [117.1582, 36.8701],
				"河南": [113.4668, 34.6234],
				"安徽": [117.29, 32.0581],
				"湖北": [114.3896, 30.6628],
				"浙江": [119.5313, 29.8773],
				"福建": [119.4543, 25.9222],
				"江西": [116.0046, 28.6633],
				"湖南": [113.0823, 28.2568],
				"贵州": [106.6992, 26.7682],
				"云南": [102.9199, 25.4663],
				"广东": [113.12244, 23.009505],
				"广西": [108.479, 23.1152],
				"海南": [110.3893, 19.8516],
				'上海': [121.4648, 31.2891],
				"西藏": [91.11, 29.97],
			};

			var d1 = {
				'江苏': 22768,
				'黑龙江': 0,
				'内蒙古': 0,
				'吉林': 0,
				'北京市': 13,
				'辽宁': 20,
				'河北': 767,
				'天津': 8,
				'山西': 0,
				'陕西': 0,
				'甘肃': 0,
				'宁夏': 0,
				'青海': 0,
				'新疆': 0,
				'四川': 0,
				'重庆': 0,
				'山东': 664,
				'河南': 0,
				'安徽': 10,
				'湖北': 11,
				'浙江': 139,
				'福建': 0,
				'江西': 20,
				'湖南': 0,
				'贵州': 23,
				'云南': 0,
				'广东': 29,
				'广西': 154,
				'海南': 48,
				'上海': 640,
				'西藏': 0
			};

			var colors = ["#1DE9B6", "#EEDD78", "#32C5E9", "#FFDB5C", "#37A2DA", "#04B9FF"];
			var year = ["2020-01"];
			var mapData = [
				[],
				[],
				[],
				[],
				[],
				[],
			];

			/*柱子Y名称*/
			var categoryData = [];
			var barData = [];
			var zeroData = [];
			for(var key in this.geoCoordMap) {
				mapData[0].push({
					"year": '2020-01',
					"name": key,
					"value": d1[key]/100,
					"value1": d1[key]/100,
				});
			}
			for(var i = 0; i < mapData.length; i++) {
				mapData[i].sort(function sortNumber(a, b) {
					return a.value - b.value
				});
				barData.push([]);
				categoryData.push([]);
				zeroData.push([])				
				for(var j = 0; j < mapData[i].length; j++) {
					if(mapData[i][j].value1!=0){
						zeroData[i].push(mapData[i][j].value1)
						categoryData[i].push(mapData[i][j].name);
					}
					barData[i].push(mapData[i][j].value1);
					
				}
			}
			getChinaMap2().then(res => {
				let JSON_data = res.data
				this.$echarts.registerMap('china', JSON_data);
				let optionXyMap01 = {
					timeline: {
						show:false,
					},
					baseOption: {
						animation: true,
						animationDuration: 1000,
						animationEasing: 'cubicInOut',
						animationDurationUpdate: 1000,
						animationEasingUpdate: 'cubicInOut',
						grid: {
							right: '2%',
							top: '10%',
							bottom: '10%',
							width: '18%'
						},
						tooltip: {
							trigger: 'axis', // hover触发器
							axisPointer: { // 坐标轴指示器，坐标轴触发有效
								type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
								shadowStyle: {
									color: 'rgba(150,150,150,0.1)' //hover颜色
								}
							}
						},
						visualMap: {
							min: 0,
							max: 250,
							left: 'left',
							top: 'bottom',
							text: ['高', '低'],
							textStyle: {
								color: 'white'
							},
							calculable: true,
							colorLightness: [0.8, 100],
							color: ['#c05050', '#e5cf0d', '#5ab1ef'],
							dimension: 0,

						},
						geo: {
							show: true,
							map: 'china',
							roam: true,
							zoom: 1,
							center: [113.83531246, 34.0267395887],
							label: {
								emphasis: {
									show: true
								}
							},
							itemStyle: {
								normal: {
									borderColor: 'rgba(147, 235, 248, 1)',
									borderWidth: 1,
									areaColor: {
										type: 'radial',
										x: 0.5,
										y: 0.5,
										r: 0.8,
										colorStops: [{
											offset: 0,
											color: 'rgba(147, 235, 248, 0)' // 0% 处的颜色
										}, {
											offset: 1,
											color: 'rgba(147, 235, 248, .2)' // 100% 处的颜色
										}],
										globalCoord: false // 缺省为 false
									},
									shadowColor: 'rgba(128, 217, 248, 1)',
									// shadowColor: 'rgba(255, 255, 255, 1)',
									shadowOffsetX: -2,
									shadowOffsetY: 2,
									shadowBlur: 10
								},
								emphasis: {
									areaColor: '#389BB7',
									borderWidth: 0
								}
							}
						},
					},
					options: []

				};
                let n=0
				
					var statistic_name = "各省" + (this.r == 1 ? "流入" : "流出") + "流量";
					optionXyMap01.options.push({
						title: [{
								text: '上海市网络流量监测',
								left: '25%',
								top: '1%',
								textStyle: {
									color: '#fff',
									fontSize: 25
								}
							},
							{
								id: 'statistic',
								text: statistic_name,
								left: '75%',
								top: '3%',
								textStyle: {
									color: '#fff',
									fontSize: 16
								}
							}
						],
						xAxis: {
							type: 'value',
							scale: true,
							position: 'top',
							min: 0,
							boundaryGap: false,
							splitLine: {
								show: false
							},
							axisLine: {
								show: false
							},
							axisTick: {
								show: false
							},
							axisLabel: {
								margin: 1,
								textStyle: {
									color: '#aaa'
								}
							},
						},
						yAxis: {
							type: 'category',
							//  name: 'TOP 20',
							nameGap: 16,
							axisLine: {
								show: true,
								lineStyle: {
									color: '#ddd'
								}
							},
							axisTick: {
								show: false,
								lineStyle: {
									color: '#ddd'
								}
							},
							axisLabel: {
								interval: 0,
								textStyle: {
									color: '#ddd'
								}
							},
							data: categoryData[n]
						},

						series: [
							
							{
								//文字和标志
								name: 'light',
								type: 'scatter',
								coordinateSystem: 'geo',
								data: this.convertData(mapData[n]),
								symbolSize: function(val) {
									return 6;
								},
								label: {
									normal: {
										formatter: '{b}',
										position: 'right',
										show: true
									},
									emphasis: {
										show: true
									}
								},
								itemStyle: {
									normal: {
										color: colors[n]
									}
								}
							},
							//地图？
							{
								type: 'map',
								map: 'china',
								geoIndex: 0,
								aspectScale: 1, //长宽比
								showLegendSymbol: false, // 存在legend时显示
								label: {
									normal: {
										show: false
									},
									emphasis: {
										show: false,
										textStyle: {
											color: '#fff'
										}
									}
								},
								roam: true,
								itemStyle: {
									normal: {
										areaColor: '#031525',
										borderColor: '#FFFFFF',
									},
									emphasis: {
										areaColor: '#2B91B7'
									}
								},
								animation: false,
								data: mapData
							},
							//地图点的动画效果
							{
								//  name: 'Top 5',
								type: 'effectScatter',
								coordinateSystem: 'geo',
								data: this.convertData(mapData[n].sort(function(a, b) {
									return b.value - a.value;
								}).slice(0, 20)),
								symbolSize: function(val) {
									return 5;
								},
								showEffectOn: 'render',
								rippleEffect: {
									brushType: 'stroke'
								},
								hoverAnimation: true,
								label: {
									normal: {
										formatter: '{b}',
										position: 'right',
										show: true
									}
								},
								itemStyle: {
									normal: {
										color: colors[n],
										shadowBlur: 10,
										shadowColor: colors[n]
									}
								},
								zlevel: 1
							},
							//地图线的动画效果
							{
								type: 'lines',
								zlevel: 2,
								effect: {
									show: true,
									period: 5, //箭头指向速度，值越小速度越快
									trailLength: 0.2, //特效尾迹长度[0,1]值越大，尾迹越长重
									symbol: 'arrow', //箭头图标
									symbolSize: 6, //图标大小
								},
								lineStyle: {
									normal: {
										color: colors[n],
										width: 1, //尾迹线条宽度
										opacity: 0.2, //尾迹线条透明度
										curveness: .3 //尾迹线条曲直度
									}
								},
								data: this.convertToLineData(mapData[n],this.geoGpsMap)
							},
							//柱状图
							{
								zlevel: 1.5,
								type: 'bar',
								barMaxWidth: 8,
								symbol: 'none',
								itemStyle: {
									normal: {
										color: colors[n],
										barBorderRadius: [0, 30, 30, 0]
									}
								},
								data: zeroData[n]
							}
						]
					});
					if(this.r == 0) {
						this.r = 1;
					} else {
						this.r = 0;
					}
			
				this.option=optionXyMap01

			})

		},
		methods: {
			convertData(data) {				
				var res = [];
				for(var i = 0; i < data.length; i++) {
					var geoCoord = this.geoCoordMap[data[i].name];
					if(geoCoord) {
						res.push({
							name: data[i].name,
							value: geoCoord.concat(data[i].value)
						});
					}
				}
				return res;
			},
			convertToLineData(data, gps) {
				
				var res = [];
				for(var i = 0; i < data.length; i++) {
					var dataItem = data[i];
					var toCoord = this.geoCoordMap[dataItem.name];
					var fromCoord = gps; //郑州
					if(fromCoord && toCoord) {
						if(this.t == 1) {
							res.push([{
								coord: toCoord,
							}, {
								coord: fromCoord,
								value: dataItem.value
							}]);
						} else {
							res.push([{
								coord: fromCoord,
								value: dataItem.value
							}, {
								coord: toCoord,
							}]);
						}

					}
				}
				if(this.t == 0) {
					this.t = 1;
				} else {
					this.t = 0;
				}
				console.log(res)
				return res;
			}
		}
	}
</script>
<style lang="scss" scoped>
	.wrap {
		width: 100%;
		height: 100%;
		position: relative;
	}
	
	.data {
		position: absolute;
		height: 100px;
		width: 100%;
		z-index: 1;
		display: flex;
		top: 10px;
		left: 10px;
	}
	
	.headline {
		display: flex;
		color: #fff;
		.title {
			background: #131420;
			padding: 8px 15px;
			display: inline-block;
			font-size: 12px;
			box-shadow: inset 0 0 10px 0 rgba(53, 145, 255, .8);
			border: 1px solid #3591ff80;
		}
	}
	
	.numberWrap {
		height: 50px;
		display: flex;
		justify-content: space-around;
		.type {
			display: flex;
			height: 100%;
			background: url(/img/bigScreen/15.png);
			font-size: 32px;
			align-items: center;
			background-size: 100% 100%;
			justify-content: center;
			border-radius: 4px;
			color: #39CED8;
			text-shadow: 0 0 25px #39CED8;
			text-align: center;
			font-family: yjsz
		}
		.type1 {
			width: 9%;
		}
		.type2 {
			width: 15%;
		}
	}
</style>